<template>
  <div>
    <el-card class="agents">
      <el-row class="agents_title">
        <el-col :span="12">
          <el-button type="primary" size="medium" @click="addAgents">添加客户</el-button>
        </el-col>
        <el-col :span="2">
          <el-select v-model="agent" placeholder="全部经纪">
            <el-option
              v-for="item in formInline"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button slot="append" @click="searchFn">筛选</el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="tableData" height="400" border style="width: 100% ">
        <el-table-column prop="image" label="图片" width="">
          <template v-slot:="scope">
            <el-image
              style="width: 100%; height: 100%"
              :src="scope.row.image"
              :lazy="true"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="" />
        <el-table-column prop="email" label="邮箱" width="" />
        <el-table-column prop="phone" label="电话" width="" />
        <el-table-column prop="agent.name" label="经纪" width="" />
        <el-table-column prop="wechat" label="微信" width="" />
        <el-table-column prop="desc" label="介绍" width="" />
        <el-table-column prop="" label="操作" width="">

          <template v-slot="scoped">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="addAgentsData(scoped.row.id)">编辑</el-button>
            </el-col>

            <el-col :span="12">
              <el-button type="danger" size="mini" @click="delAgentsLis(scoped.row.id)">删除</el-button>
            </el-col>
          </template>

        </el-table-column>
      </el-table>
      <el-col>
        <el-pagination
          class="agents_pagination"
          layout="prev, pager, next"
          :total="total"
          :page-size="queryData._limit"
          :current-page="currentpPage"
          @current-change="currentChange"
        />
      </el-col>
    </el-card>
    <clientsEdit ref="addClientsEdit" :edit-id.sync="editId" :isshow-dialog.sync="isshowDialog" :form-inline="formInline" />
  </div>
</template>

<script>
import { getClientsList, delClientsList } from '@/api/clients'
import { getAgentsList } from '@/api/agents'
import clientsEdit from './clients-edit.vue'
export default {
  components: { clientsEdit },
  data() {
    return {

      tableData: [
        { image: '',
          name: '',
          email: '',
          phone: '',
          agent: '',
          wechat: '',
          desc: '' }

      ],
      queryData: {
        _limit: 5,
        _start: 0,
        name_contains: '',
        agent: null
      },
      total: null,
      input: '',
      agent: '',
      formInline: [],
      currentpPage: 1,
      isshowDialog: false,
      editId: -1
    }
  },
  created() {
    this.clients()
  },
  methods: {
    async clients(id, name) {
      if (id || name) {
        console.log(114, id, name)
        const total = await getClientsList(
          {
            name_contains: name,
            agent: id
          }
        )
        this.total = total.length
        const res = await getClientsList({
          ...this.queryData,
          name_contains: name,
          agent: id || null,
          _start: this.currentpPage * this.queryData._limit - this.queryData._limit
        })
        console.log(155, res)
        this.tableData = res
      } else {
        const total = await getClientsList()
        this.total = total.length
        const res = await getClientsList({
          ...this.queryData,
          _start: this.currentpPage * this.queryData._limit - this.queryData._limit
        })
        console.log(155, res)
        this.tableData = res
      }
      const agent = await getAgentsList()
      this.formInline = agent
    },

    addAgents() {
      // this.$refs.addClientsEdit.btnCancel()
      this.isshowDialog = true
    },
    searchFn() {
      this.clients(this.agent, this.input)
    },
    addAgentsData(id) {
      // this.$refs.addClientsEdit.btOk(id)
      this.editId = id
      this.isshowDialog = true
    },
    async delAgentsLis(id) {
      await delClientsList(id)
      this.clients()
    },
    currentChange(curr) {
      this.currentpPage = curr
      this.queryData._start = this.queryData._limit * curr - this.queryData._limit
      this.clients()
    }
  }
}
</script>
<style lang="scss" >
.agents {
  margin: 20px;
  .agents_title {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }
  .agents_pagination{
      margin-top: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid #ebeef5;
      text-align: center;
  }
  .el-select{
    color: #000;
  }

}
</style>
